<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="金西振">
    <title></title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        a{
            background-color: lightseagreen;

        }
    </style>
</head>
<body>
    <div class="box">
        <a href="http://www.baidu.com" target="_blank">百度一下</a>
    </div>

    <form>
        <input type="text" placeholder="账号">
        <input type="reset" value="重置">
    </form>
<script>

    var form = document.querySelector('form');
    // 点击重置按钮的时候出发reset方法
    form.onreset = function(ev){
        ev.preventDefault();//阻止重置表单的默认行为
        console.log('开始重置');
    }


    var box = document.querySelector('.box');
    var a = box.querySelector('a');
    var body = document.body;


    // body.addEventListener('click', function(){alert('body 捕获');}, true);
    // body.addEventListener('click', function(){alert('body 冒泡');}, false);

    box.addEventListener('click', function(ev){
        // alert('box 捕获1');

        // stop 停止，Immediate 立即，Propagation传播
        // 停止事件传播，不会影响同级别的事件监听
        // ev.stopPropagation();
        // 立即停止事件传播，会停止同级别多个事件监听的调用
        // ev.stopImmediatePropagation();

    }, true);
    // box.addEventListener('click', function(ev){ alert('box 捕获2');    }, true);

    box.addEventListener('click', function(ev){
        // alert('box 冒泡1');
        // ev.stopPropagation();
        // ev.stopImmediatePropagation();
    }, false);
    // box.addEventListener('click', function(ev){ alert('box 冒泡2');    }, false);


    // a.addEventListener('click', function(){alert('a 捕获');}, true);

    a.addEventListener('click', function(ev){
        // alert('a 冒泡');
        console.log('a click');
        console.dir(ev);

        // <a href="http://www.baidu.com" target="_blank">百度一下</a>
        // 点击a标签可以在新标签页打开百度首页，这属于是a标签的默认行为

        // prevent 阻止， Default 默认
        // 阻止事件的默认行为
        ev.preventDefault();

        ev.defaultPrevented = true;//不能恢复已经被阻止的默认事件
        // 获取默认事件是否被阻止
        console.log(ev.defaultPrevented);
    }, false);


    box.onclick = function(){
        console.log('box click');
    }
    
</script>
</body>
</html>